<template lang="pug">
  .BatchAuthModal
    Modal(
      v-model="isShowBatchAuthModal"
      :title="isAdd ? '批量添加权限' : '批量删除权限'"
      class-name="vertical-center-modal"
    )
      Form.ivu-row(ref="formData" :model="formData" :rules="rules" :label-width="100")
        FormItem.form-item.ivu-col(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'tree'")
            Tree.h200.overflow-y-scroll(:data="permissionList" ref="tree" show-checkbox check-directly @on-check-change="treeCheckChange")
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSave") 保存
</template>

<script>
import { Common } from '@/utils/common.js'
import { RoleApi } from '@/api/Role.api.js'
export default {
  name: 'BatchAuthModal',

  watch: {
  },

  data () {
    return {
      isShowBatchAuthModal: false,
      isAdd: false,
      roleIdList: '',
      formData: {
        id: '',
        permissionIdList: ''
      },
      formItem: [
        { type: 'tree', label: '菜单权限', placeholder: '请选择菜单权限', prop: 'permissionIdList', model: 'permissionIdList', style: 'ivu-col-span-24' }
      ],
      rules: {
      },
      arrListDown: {
        tempOps: []
      },
      permissionList: [], // 菜单权限列表
      selectNode: []
    }
  },

  mounted () {
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, param) {
      this[methodsWords](param)
    },

    cancel () {
      this.isShowBatchAuthModal = false
    },

    show (isAdd, roleIdList) {
      this.isAdd = isAdd
      this.roleIdList = roleIdList.split(',')
      this.isShowBatchAuthModal = true
      this.$refs.formData.resetFields()
    },

    // 根据权限树
    async getPermissionTreeList () {
      let res = await RoleApi.getPermissionTreeList()
      console.log('根据权限树: ', res)
      if (res.status === 200 && res.data.success) {
        this.permissionList = res.data.data
      } else {
      }
    },

    selectChange (value) {
      console.log('value: ', value)
    },

    // 保存角色
    handleSave () {
      var params = {
        IsAdd: this.isAdd,
        RoleIdList: this.roleIdList,
        PermissionIdList: this.selectNode
      }
      console.log('params: ', params)
      this.$refs.formData.validate((valid) => {
        if (valid) {
          RoleApi.setRolePermission(params).then(res => {
            // console.log('保存角色res: ', res)
            if (res.status === 200 && res.data.success) {
              this.$Message.success(res.data.message)
              this.isShowBatchAuthModal = false
              this.$emit('handleSave')
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {
          this.$Message.warning('输入有误，请返回检查!')
        }
      })
    },

    treeCheckChange (value) {
      // console.log('value: ', value)
      var tempArr = []
      value.map(item => {
        tempArr.push(item.id)
      })
      this.selectNode = tempArr
      console.log('被勾选的节点有this.selectNode: ', this.selectNode)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
